<template>
  <div class="home">
    <h1>欢迎来到新闻网站</h1>
    <p>这是一个基于Vue3的简易新闻网站，您可以浏览新闻、发表评论。</p>
    <div v-if="!authStore.user" class="auth-buttons">
      <router-link to="/login" class="btn">登录</router-link>
      <router-link to="/register" class="btn">注册</router-link>
    </div>
    <div v-else class="welcome">
      <p>欢迎回来，{{ authStore.user.username }}！</p>
      <router-link to="/articles" class="btn">查看新闻</router-link>
    </div>
  </div>
</template>

<script>
import { useAuthStore } from '../stores/auth';

export default {
  setup() {
    const authStore = useAuthStore();

    return {
      authStore
    };
  }
};
</script>

<style scoped>
.home {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}
.auth-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 15px;
}
.welcome {
  margin-top: 30px;
}
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
</style>